<template>
  <div class="change-status">
    <el-button round type="primary" border @click="setShopStatus">切换营业状态</el-button>
  </div>
</template>

<script setup lang="ts">
import { getShopStatusAPI, setShopStatusAPI } from "@/api/shop"
import { useUserStore } from "@/store/modules/user"
import { onMounted } from "vue"
const userStore = useUserStore()

// 获取营业状态
const getShopStatus = async () => {
  const res = await getShopStatusAPI()
  if (res.code === 1) {
    userStore.setShopStatus(res.data)
  }
}

// 切换营业状态
const setShopStatus = async () => {
  userStore.setShopStatus(userStore.shopStatus === 1 ? 0 : 1)
  await setShopStatusAPI(userStore.shopStatus)
}
onMounted(() => {
  getShopStatus()
})
</script>

<style scoped lang="scss">
.change-status {
  ::v-deep(.el-button) {
    border: 1px solid #fff;
  }
}
</style>
